{% extends 'base.html' %}


{% block content %}

<!-- 面包屑 -->
<div class="row mt-3">
    <div class="col-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="">设置</a></li>
                <li class="breadcrumb-item active" aria-current="page">上传头像</li>
            </ol>
        </nav>
    </div>
</div>

<!-- 操作区 -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <img src="" id="preview" class="img-thumbnail" style="height:200px;width:200px">
                <form action="{% url 'upload-avatar' %}" method="post" enctype="multipart/form-data">
                    {% include 'partials/sweetalert.html' %}
                    {% csrf_token %}
                    <div class="form-group">
                        <input type="file" name="avatar" id="avatar">
                    </div>
                    <input type="submit" class="btn btn-primary" value="保存">
                </form>
            </div>
        </div>
    </div>
</div>


{% endblock %}

{% block js %}

<script>
const fileInput = document.getElementById('avatar')
const previewImg = document.getElementById('preview')
const imgUrl = '/media/{{request.user.userprofile.avatar}}'

previewImg.style.display = 'none'

if (imgUrl) {
    previewImg.src = imgUrl;
    previewImg.style.display = 'block'
}


fileInput.addEventListener('change', function(){
    var file = this.files[0];
    var reader = new FileReader();
    reader.addEventListener('load', function(){
        previewImg.src = reader.result;
        previewImg.style.display = 'block'
    })
    reader.readAsDataURL(file);

})


</script>
{% endblock %}